<template>
    <div>
        <div v-if="msg.note"><el-button type="primary" @click="dialogFormVisible = true">创建</el-button></div>
        <div v-if="!msg.note"><el-button type="primary" size="mini" @click="dialogFormVisible = true">修改</el-button></div>
        <el-dialog :title="msg.title" :visible.sync="dialogFormVisible">
            <div>
                <el-select v-model="value" placeholder="请选择">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
                <div class="tip">
                    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                        <el-tab-pane label="基础信息" name="1"></el-tab-pane>
                        <el-tab-pane label="价格设置" name="2"></el-tab-pane>
                        <el-tab-pane label="单位设置" name="3"></el-tab-pane>
                        <el-tab-pane label="销售设置" name="4"></el-tab-pane>
                        <el-tab-pane label="关联设置" name="5"></el-tab-pane>
                        <el-tab-pane label="成本卡" name="6"></el-tab-pane>
                        <el-tab-pane label="商品介绍" name="7"></el-tab-pane>
                        <el-tab-pane label="记存货设置" name="8"></el-tab-pane>
                    </el-tabs>
                </div>
                <div class="form">
                    <div class="top"><span>门店类型</span><span><el-badge is-dot class="item">建议售价</el-badge></span></div>
                    <div class="row" v-for="(item,index) in form" :key="index"><div class="div1"><span>{{item.label}}</span></div><div class="div2" style="text-align: center"><el-input v-model="item.money" placeholder="请输入内容"></el-input></div></div>
                </div>
                <div class="form">
                    <div class="top"><span>所属区域</span><span><el-badge is-dot class="item">门店名称</el-badge></span></div>
                    <div class="row" v-for="(item,index) in nameform" :key="index"><div class="div1"><span>{{item.address}}</span></div><div class="div2"><el-input v-model="item.mendian" placeholder="请输入内容"></el-input></div></div>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">保 存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "chang_shangpin",
        props:{
            msg:{
                required:true
            }
        },
        data(){
            return{
                input:'',
                dialogFormVisible:false,
                activeName:'first',
                form:[{label:'自营',money:'25.00'},{label:'连锁',money:'30.00'}],
                nameform:[{address:'福州',mendian:'门店一'},{address:'',mendian:''}],
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                value: ''
            }
        },
        methods:{
            handleClick(tab, event) {
                console.log(tab, event);
            }
        }
    }
</script>

<style lang="less">
    .tip{
        margin-top: 20px;
    }
    .form{
        margin-bottom: 20px;
        .top{
            width: 100%;
            display: flex;
            flex-direction: row;
            background: #dedede;
            span{
                width: 50%;
                display: block;
                text-align: center;
            }
        }
        .row{
            display: flex;
            flex-direction: row;
            .div1,.div2{
                border: 1px solid #dedede;
                width: 50%;
                margin: 0px auto;
                text-align: center;
                line-height: 36px;
            }
            .div2{
                border-left: 0;
            }
            .el-input--small .el-input__inner{
                text-align: center;
            }
        }
    }
</style>
